<template>
<div class="box">
<el-row class="title">
    <el-col :span="4" class="name">{{dis.name}}</el-col>
    <el-col :span="3">
      <div class="label">
        <!-- <span
          v-for="item2 in dis.label"
          :key="item2"
          :class="colorArr[parseInt(Math.random() * 4)]"
          >{{ item2 }}</span
        > -->
        <span
          :v-show="dis.partPname!=null"
          :class="colorArr[parseInt(Math.random() * 4)]"
          >{{ dis.partPname }}</span
        >
        <span
          :v-show="dis.partName!=null"
          :class="colorArr[parseInt(Math.random() * 4)]"
          >{{ dis.partName }}</span
        >
        <span 
          :v-show="dis.departmentPname!=null"
          :class="colorArr[parseInt(Math.random() * 4)]"
          >&nbsp;{{ dis.departmentPname }}</span
        >
        <span
          :v-show="dis.departmentName!=null"
          :class="colorArr[parseInt(Math.random() * 4)]"
          >{{ dis.departmentName }}</span
        >
      </div>
    </el-col>
    <el-col :span="2" :offset="14" class="icon" @click.native="changeLike">
      <i v-show="!dis.isCollection" class="iconfont icon-shoucang3"></i>
      <i v-show="dis.isCollection" class="iconfont icon-shoucang2"></i>
    </el-col>
  </el-row>
  <el-row>
    <el-col :span="14" class="area">
      <h3 class="bi"><i class="iconfont icon-qiyejianjie"></i>疾病简介</h3>
      <el-row class="content">
        <el-col :span="11" class="imgbox"><img :src="dis.imgUrl"/>
          <div class="lab">
            <p><span>发病部位：</span>{{dis.partPname}}&nbsp;/&nbsp;{{dis.partName}}</p>
            <p><span>就诊科室：</span>{{dis.departmentPname}}&nbsp;/&nbsp;{{dis.departmentName}}</p>
          </div>
        </el-col>
        <el-col :span="12" :offset="1">
          <p>{{dis.introduce}}</p>
          
        </el-col>
      </el-row>
    </el-col>
    <el-col :span="9" :offset="1">
      <KnowledgeRec :partPid=dis.partPid :departmentPid=dis.departmentPid></KnowledgeRec>
    </el-col>
  </el-row>
  <el-row>
    <el-col :span="24" class="area" >
      <h3 class="gi"><i class="iconfont icon-bingyin"></i>疾病病因</h3>
      <p class="content2" style="height:220px">{{dis.cause}}</p>
    </el-col>
  </el-row>
   <el-row>
    <el-col :span="24" class="area">
      <h3 class="yi"><i class="iconfont icon-icon_xinyong_xianxing_jijin-"></i>典型症状</h3>
      <p class="content2">{{dis.symptom}}</p>
    </el-col>
  </el-row>
   <el-row>
    <el-col :span="13" class="area">
      <h3 class="ri"><i class="iconfont icon-yufang"></i>疾病预防</h3>
      <p class="content">{{dis.prevent}}</p>
    </el-col>
    <el-col :span="10" :offset="1" class="area">
      <h3 class="bi"><i class="iconfont icon-tishi"></i>小贴士</h3>
      <p class="content">{{dis.tips}}</p>
    </el-col>
  </el-row>
  <el-row class="centop">
        <el-col :span="4">
          <span class="acspan"
            >经验推荐</span
          >
        </el-col>
        <el-col :span="3" :offset="17">
        </el-col>
      </el-row>
  <div class="exp">
    <Exprec></Exprec>
  </div>
  
</div>
  
</template>

<script>
import KnowledgeRec from '@/components/KnowledgeRec.vue'
import Exprec from "../components/Exprec.vue";
export default {
  components:{
    KnowledgeRec,Exprec
  },
  data() {
    return {
      sicknessId:'',
      colorArr: ["bi-bg", "yi-bg", "ri-bg", "gi-bg"],
      dis: {
        // name: "偏头痛",
        // label: ["头部", "颅脑"],
        // isLike: false,
        // img:"http://5b0988e595225.cdn.sohucs.com/images/20181030/04c9a600df8d4771839c37e69a38b8e9.jpeg",
        // content:"偏头痛是一类有家族发病倾向的周期性发作疾病。表现为发作性的偏侧搏动性头痛，伴恶心、呕吐及羞明，经一段歇期后再次发病。在安静、黑暗环境内或睡眠后头痛缓解。在头痛发生前或发作时可伴有神经、精神功能障碍。",
        // buwei:'颅脑',
        // keshi:'神经内科',
        // binyin:"病因不清，约50%病人有家族史。女性病员偏头痛倾向在月经来潮前发作，怀孕后发作减少，提示发病可能和内分泌或水潴留有关。精神紧张、过度劳累、气候骤变、强光刺激、烈日照射、低血糖、应用扩血管药物或利血平、食用高酪胺食物酒精类饮料，均可诱发偏头痛发作。",
        // zhengzhuang:"女性占2/3以上, 10岁前、20岁前、40岁前发病分别为25%, 55%, 90%。大多数患者有偏头痛家族史，发作前数小时至数天 伴前驱症状，如呕吐、畏光、畏声、抑郁或倦怠等, 10%的患者有视觉或其他先兆。发作频度每周至每年1次至数次不等，偶有持续性发作病例。"
      },
      
    };
  },
  mounted(){
    this.sicknessId=this.$route.params.id
    this.getDetail();
  },
  methods:{
    getDetail(){
      this.$axios({
          method:'get',
          url:'/sickness/getDetail',
          params:{sicknessId:this.sicknessId}
        })
        .then((res)=>{
          this.dis=res.data
        })
        .catch((err) => {
          console.log(err);
        })
    },
    changeLike(){
      console.log(11);
      this.dis.isCollection=!this.dis.isCollection;
      // this.$axios({
      //     method:'get',
      //     url:'/collection/addOrCancel',
      //     params:{sicknessId:this.$route.params.id}
      //   })
      //   .then((res)=>{
      //     this.dis=res.data
      //     console.log(res.data)
      //   })
      //   .catch((err) => {
      //     console.log(err);
      //   })
    },
  }
};
</script>

<style lang="less" scoped>
.box{
  background-color: #f2f7fb;
  overflow: hidden;
  &>div{
    width: 1200px;
  margin:40px auto;
  }
}
.title{
  width: 1200px;
  background-color: #9ba5bb;
  margin:20px auto;
  border-radius: 10px;
  height: 80px;
  line-height: 80px;
  
  .name{
    font-size: 30px;
    color: #333;
  }
  .label{
    width: 300px;
  }
  .label > span {
      background-color: #9ba5bb;
      color: white;
      font-size: 8px;
      border-radius: 5px;
      padding: 5px 8px;
      margin: 5px 2px;
      text-align: left;
    }
    .icon>i{
      font-size: 30px;
      color: #fcc64a ;
    }
    
}
.area{
      background-color: #fff;
      border-radius: 10px;
       box-shadow: 5px 5px 10px 5px rgba(150, 150, 150, 0.2);
       h3{
         text-align: left;
         padding: 10px 0;
         i{
           margin:0 10px 0 20px;
         }
         border-bottom: 1px solid #ddd;
       }
       & img{
         width: 100%;
       }
       .content{
         margin:20px 40px;
         height: 295px;
         position: relative;
         .imgbox{
           height: 100%;
           line-height: 235px;
           overflow: hidden;
           img{
             vertical-align: middle;
           }
         }
         p{
           text-align: left;
           line-height: 1.6;
           color: #333;
         }
         .lab{
           position: absolute;
           bottom: 10px;
           span{
             color: #999;
             user-select: none;
           }
         }
       }
       p{
         line-height: 2.2;
         text-align:left;
       }
       .content2{
         margin:20px 40px;
         height: 220px;
         position: relative;
         
       }
    }
    
</style>